
<%--
  Created by IntelliJ IDEA.
  User: wanlo
  Date: 2020/10/12
  Time: 11:20
  Author:wanlong

  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath() + "/";
%>
<html>
<style>
    .col-sm-2,.col-sm-4{
        line-height: 32px;
    }
</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><%-- initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放   --%>
    <title>宠物进购管理</title>
    <base href="<%=basePath%>">
    <script src="static/commons/css/commonsCss.js"></script>



</head>
<body>
<div class="tableBody">
    <div class="panel panel-default" style="overflow: hidden">
        <div class="panel-body form-group col-sm-12" style="margin-top:15px;margin-bottom: 0px">
            <label class="col-sm-2 control-label text-right"  >姓名：</label>
            <div class="col-sm-2 text-left" >
                <input type="text" oninput="sx()" class="form-control col-sm-2 text-left" id="searchName"/>
            </div>
            <div class="col-sm-3 pull-left text-left">
                <button class="btn btn-primary glyphicon glyphicon-search" id="search"></button>
                <button type="button" class="btn  btn-success glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal"></button>
                <button  type="button" id="batchDel" class="btn btn-danger glyphicon glyphicon-trash"></button>
            </div>

        </div>
    </div>

    <div id="toolbar" style="margin-top: 0px;overflow: hidden" >

    </div>
    <table id="tables" class="table table-striped table-hover table-bordered"></table>
    <%--    模态框  增加 修改--%>
    <div class="btn-group " style="margin-right: 20px">
        <!--  添加模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <form>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                添加
                            </h4>
                        </div>
                        <div class="modal-body" style="height: 500px">
                            <%--                        border: 1px red  solid;--%>
                            <div class="form-group  col-sm-12" style="margin-bottom: 20px;overflow: hidden">
                                <label class="col-sm-2 control-label text-left">名称:</label>
                                <div class="col-sm-4">
                                    <input type="text" id="name" class="form-control">
                                </div>

                                <label class="col-sm-2 control-label text-left" >成本:</label>
                                <div class="col-sm-4">
                                    <input type="text" id="buy" class="form-control">
                                </div>
                            </div>

                            <div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
                                <label class="col-sm-2 control-label text-left" >年龄:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="age" class="form-control">
                                </div>
                                <label class="col-sm-2 control-label text-left" >售价:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="sell" class="form-control">
                                </div>
                            </div>

                            <div class="form-group col-sm-12">

                                <label class="col-sm-2 control-label text-left " >性别:</label>

                                <div  class="col-sm-5">
                                    <label style="overflow: hidden;height: 30px;width: 50px;margin-left: 15px" >
                                        <input type="radio"  checked="" value="0" id="optionsRadios1" name="gender" >&nbsp;&nbsp;&nbsp;雄性</label>
                                </div>

                                <div class="col-sm-5">
                                    <label style="overflow: hidden;height: 30px;width: 50px;margin-left: 50px" >
                                        <input type="radio" value="1" id="optionsRadios2" name="gender">&nbsp;&nbsp;&nbsp;雌性</label>
                                </div>


                            </div>

                            <div class="form-group draggable col-sm-12" >
                                <label class="col-sm-2 control-label text-left">类型:</label>
                                <div class="col-sm-4">
                                    <select id="type" class="form-control">
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label text-left" >毛色:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="coat" class="form-control">
                                </div>
                            </div>
                            <div class="form-group  col-sm-12" style="margin-bottom: 20px;overflow: hidden">
                                <label class="col-sm-2 control-label text-left" >品种:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="breed" class="form-control">
                                </div>

                                <label class="col-sm-2 control-label text-left" >体重:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="weight" class="form-control">
                                </div>
                            </div>


                            <div class="form-group  col-sm-12" style="margin-bottom: 20px;overflow: hidden">
                                <label class="col-sm-2 control-label text-left" >描述:</label>

                                <div class="col-sm-10">
                                    <textarea class="form-control" id="description" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" id="sub" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>

                </div><!-- /.modal-content -->
            </form>

        </div><!-- /.modal -->


        <!-- 修改模态框（Modal） -->
        <div class="modal fade" id="updeteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <form>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabels">
                                添加
                            </h4>
                        </div>
                        <div class="modal-body" style="height: 500px">
                            <%--                        border: 1px red  solid;--%>
                            <div class="form-group  col-sm-12" style="margin-bottom: 20px;overflow: hidden">
                                <label class="col-sm-2 control-label text-left" >名称:</label>
                                <div class="col-sm-4">
                                    <input type="text" id="names" class="form-control">
                                    <input type="hidden" id="ids" class="form-control">
                                </div>
                                <label class="col-sm-2 control-label text-left" >成本:</label>
                                <div class="col-sm-4">
                                    <input type="text" id="buys" class="form-control">
                                </div>
                            </div>
                            <div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
                                <label class="col-sm-2 control-label text-left" >年龄:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="ages" class="form-control">
                                </div>

                                <label class="col-sm-2 control-label text-left" >售价:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="sells" class="form-control">
                                </div>
                            </div>

                            <div class="form-group col-sm-12">
                                <label class="col-sm-2 control-label text-left " >性别:</label>
                                <div  class="col-sm-5">
                                    <label style="overflow: hidden;height: 30px;width: 50px;margin-left: 15px" >
                                        <input type="radio"  checked="" value="0" id="optionsRadios1s" name="genders" >&nbsp;&nbsp;&nbsp;雄性</label>
                                </div>

                                <div class="col-sm-5">
                                    <label style="overflow: hidden;height: 30px;width: 50px;margin-left: 50px" >
                                        <input type="radio" value="1" id="nv"  name="genders">&nbsp;&nbsp;&nbsp;雌性</label>
                                </div>


                            </div>

                            <div class="form-group draggable col-sm-12" >
                                <label class="col-sm-2 control-label text-left">类型:</label>
                                <div class="col-sm-4">
                                    <select id="types" class="form-control">
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label text-left" >毛色:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="coats" class="form-control">
                                </div>
                            </div>
                            <div class="form-group  col-sm-12" style="margin-bottom: 20px;overflow: hidden">
                                <label class="col-sm-2 control-label text-left" >品种:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="breeds" class="form-control">
                                </div>
                                <label class="col-sm-2 control-label text-left" >体重:</label>

                                <div class="col-sm-4">
                                    <input type="text" id="weights" class="form-control">
                                </div>
                            </div>


                            <div class="form-group  col-sm-12" style="margin-bottom: 20px;overflow: hidden">
                                <label class="col-sm-2 control-label text-left" >描述:</label>

                                <div class="col-sm-10">
                                    <textarea class="form-control" id="descriptions" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" id="upd" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>

                </div><!-- /.modal-content -->
            </form>
        </div>


    </div>
</div>






</body>
<!-- 全局js -->
<script src="static/commons/js/commonsJs.js"></script>

<script type="text/javascript">

    //动态加载表格数据
    $('#tables').bootstrapTable({
            url: 'feeding/petAll',
            method:'get',
            // contentType:"application/x-www-form-urlencoded; charset=UTF-8",   设置post请求  需要添加
            pagination: true,
            // cardView: true,  //名片显示
            showColumns: true, //显示隐藏列
            showRefresh: true,  //显示刷新按钮
            // queryParams: queryParams, //参数
            // queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            striped: true,//行间隔色
            pageSize:5,                                    //每页的记录行数
            locale: "zh-CN",
            search: false,  //搜索框
            toolbar:'#toolbar',//工具栏
            formatLoadingMessage:function(){
                return "请稍等，正在加载中...";
            },
            formatNoMatches: function () {  //没有匹配的结果
                return '无符合条件的记录';
            },
            columns: [ {
                checkbox : true,
                title : '全选',
                align : 'middle'
            },
                {
                    field: 'id',
                    title: 'ID',
                    align:'center',
                    visible: false //是否显示
                }, {
                    field: 'name',
                    title: '宠物名称',
                    align:'center',
                    class: 'colStyle'  //动态添加每一列样式
                },{
                    field: 'age',
                    title: '年龄',
                    align:'center',
                    visible: true //是否显示
                },
                {
                    field: 'gender',
                    title: '性别',
                    align:'center',
                    visible: true ,//是否显示
                    formatter:function(value,row,inde){
                        if(value==0){
                            return '雄性';
                        }
                        return '雌性';
                    }
                },
                {
                    field: 'typeId',
                    title: '类型编号',
                    align:'center',
                    visible: true //是否显示
                },
                // {
                //     field: 'userId',
                //     title: '用户编号',
                //     align:'center',
                //     visible: true //是否显示
                // },
                {
                    field: 'breed',
                    title: '宠物品种',
                    align:'center',
                    visible: true //是否显示
                },
                {
                    field: 'sell',
                    title: '售价￥',
                    align:'center',
                    visible: true //是否显示
                },
                {
                    field: 'coat',
                    title: '毛色',
                    align:'center',
                    visible: true //是否显示
                },
                {
                    field: 'weight',
                    title: '体重/kg',
                    align:'center',
                    visible: true //是否显示
                },
                // {
                //     field: 'endDate',
                //     title: '出售日期',
                //     align:'center',
                //     visible: true //是否显示
                // },
                {
                    field: 'description',
                    title: '描述',
                    align:'center',
                    visible: true //是否显示
                },
                {
                    field: 'createDate',
                    title: '创建日期',
                    align:'center',
                    visible: true, //是否显示
                },
                {
                    field: 'Desc',
                    title: '操作',
                    // events: operateEvents,//给按钮注册事件
                    formatter:AddFunctionAlty,//表格中添加按钮
                    align: 'center',
                }
            ]
        }
    )
    //刷新页面
    function sx(){
        if ($("#searchName").val().length==0){
            $('#tables').bootstrapTable("refresh");
        }
    }

    //给表格中添加 按钮
    function AddFunctionAlty(value,row,index) {  //给表格中添加 按钮
        return[
            '<button type="button" class="btn btn-xs btn-warning"   onclick="upde('+row.id+')" >编辑</button> &nbsp;&nbsp;'+
            '<button  type="button" class="btn btn-xs btn-danger" onclick="del('+row.id+')">删除</button>'
        ].join("")
    }
    // 删除
    function del(index){
        swal({
            title: "您确定要删除这条信息吗",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "删除",
            closeOnConfirm: false
        }, function () {
            $.post("feeding/delete",{id:index},function(data){
                swal("删除成功！", "您已经永久删除了这条信息。", "success");
                $('#tables').bootstrapTable("refresh");
            })

        });

    }

    //修改模态框赋值
    function upde(index){
        $("#updeteModal").modal('show');
        $.post("feeding/selById",{id:index},function(data){
            if(data.code==200){
                $("#names").val(data.data.name)
                $("#breeds").val(data.data.breed)
                $("#ages").val(data.data.age)
                $("#descriptions").val(data.data.description)
                $("#buys").val(data.data.buy)
                $("#sells").val(data.data.sell)
                $("#weights").val(data.data.weight)
                $("#coats").val(data.data.coat)
                $("#ids").val(data.data.id)
                if(data.data.gender==1){
                    $("#nv").attr("checked",'checked');
                }
                //在修改模态框中，查询类型赋值 select
                $.post("type/all",function(da){
                    if(da.code==200){
                        $(da.data).each(function(i,n){
                            var option = '<option value ="'+n.id+'">'+n.type+'</option>';
                            if(data.data.typeId==n.id){
                                option = '<option selected value ="'+n.id+'">'+n.type+'</option>';
                            }
                            $("#types").append(option);
                        })
                    }
                })
            }
        })
    }


    $(function (){
        //add 获取类型
        $.post("type/all",function(data){
            if(data.code==200){
                $(data.data).each(function(i,n){

                    var option = '<option value ="'+n.id+'">'+n.type+'</option>';
                    //   alert(option)
                    $("#type").append(option);
                })
            }

        })
        //添加宠物
        $("#sub").click(function (){
            $.post("feeding/add",{
                name:$("#name").val(),
                age:$("#age").val(),
                breed:$("#breed").val(),
                gender:$("input[name='gender']:checked").val(),
                typeId:$("#type").val(),
                description:$("#description").val(),
                buy:$("#buy").val(),
                sell:$("#sell").val(),
                weight:$("#weight").val(),
                coat:$("#coat").val()},function(data){
                if(data.code==200){
                    $('#myModal').modal('hide');
                    $('form')[0].reset();
                    $('#tables').bootstrapTable("refresh");
                    swal({
                        title: "太帅了",
                        text: "宠物录入成功",
                        type: "success"
                    });
                }else{
                    alert("添加失败")

                }

            })


        })
        //search
        $("#search").click(function(){
            var name =   $("#searchName").val();
            $('#tables').bootstrapTable('refresh',{
                query:
                    {
                        name:name
                    }
            });
        })
        //批量删除
        $("#batchDel").click(function(){
            var rows = $("#tables").bootstrapTable('getSelections');
            var ids = "";
            $(rows).each(function(i,n){
                ids+=n.id+",";
            })
            ids = ids.substring(0,ids.length-1);
            $.post("feeding/batchDel",{ids,ids},function(data){
                if(data.code==200){
                    $('#tables').bootstrapTable("refresh");
                    alert("删除成功")
                }else{
                    alert("删除失败")
                }

            })
        })


        //修改宠物
        $("#upd").click(function (){
            $.post("feeding/upd",{id:$("#ids").val(),name:$("#names").val(),age:$("#ages").val(),breed:$("#breeds").val(),gender:$("input[name='genders']:checked").val(),typeId:$("#types").val(),description:$("#descriptions").val(),buy:$("#buys").val(),
                sell:$("#sells").val(),
                weight:$("#weights").val(),
                coat:$("#coats").val()},function(data){
                if(data.code==200){
                    $('#updeteModal').modal('hide');
                    // $('form')[0].reset();
                    $('#tables').bootstrapTable("refresh");
                    swal({
                        title: "太帅了",
                        text: "宠物修改成功",
                        type: "success"
                    });
                }else{
                    alert("修改失败")

                }

            })


        })

    })



</script>
</html>
